<template>
  <q-modal v-model="modalVisible" :header="`${$t('Misc.SpecifyDetails', { name: $t('AGVCore.AGVModel') })}`"
           :menuBtn="false" :persistent="false" width="680">
    <QInfo :columns="columns" :rowInfo="rowInfo"></QInfo>
  </q-modal>
</template>
<script setup>
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { formatColumns } from 'src/views/AGVCore/AGVModel.js'
import { ref, watch } from 'vue'

const props = defineProps({ rowInfo: { type: Object, default: () => ({}) } })
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })

const columns = ref([])
const AGVBrands = ref([])
getRemoteData('agv_brand', '/yfagv/api/agvCfgBrand/list').then(data => (AGVBrands.value = data))

watch(modalVisible, val => val && initColumns())
const initColumns = () => columns.value = formatColumns(props.rowInfo.deviceType, AGVBrands.value)
</script>